<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-17 00:10:17
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-27 10:21:07
 * @FilePath: \ProtocolTool\src\renderer\src\components\CodeHighlight\index.vue
-->
<script setup lang="ts">
// @ts-ignore
import Prism from 'prismjs'
import { onMounted, onUpdated } from 'vue'
import Simplebar from 'simplebar-vue'
import 'simplebar-vue/dist/simplebar.min.css'

defineProps({
  lang: {
    type: String,
    required: true,
    default: 'json'
  },
  value: {
    type: Object,
    required: true,
    default: () => {}
  },
  requestData: {
    type: Object,
    required: true,
    default: () => {}
  }
})
onMounted(() => {
  Prism.highlightAll() //初始化渲染
})
onUpdated(() => {
  Prism.highlightAll() //修改内容后重新渲染
})
</script>

<template>
  <Simplebar class="code">
    <a-divider orientation="left" class="box"> 请求数据 </a-divider>
    <pre><code :class="[`language-${lang}`, 'line-numbers']">{{ requestData }}</code></pre>
    <!-- <a-divider dashed /> -->
    <a-divider orientation="left" class="box"> 响应数据 </a-divider>
    <pre><code :class="[`language-${lang}`, 'line-numbers']">{{ value }}</code></pre>
  </Simplebar>
</template>

<style lang="less" scoped>
.code {
  width: 100%;
  height: 100%;
  pre[class*='language-'] {
    width: 100%;
    height: inherit;
    min-width: fit-content;
    margin: 0;
    background: #fafafa;
    // color: #bdbcbc;
  }

  :deep(.simplebar-content) {
    height: inherit;
    ::-webkit-scrollbar {
      width: 7px;
      height: 7px;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
      border-radius: 10px;
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
  :deep(.code-toolbar) {
    height: inherit;
  }

  .box {
    font-size: 13px;
    margin: 5px 0;
    color: #777777;
    font-weight: 700;
  }
}
</style>
